<template>
<div>
  <a-breadcrumb style="margin: 0px 0px 0px 0px">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>个人信息</a-breadcrumb-item>
          <a-breadcrumb-item>工作经历</a-breadcrumb-item>
    </a-breadcrumb>
<el-card style="margin-top:20px" shadow="hover">
 <el-row>
    <el-container>
      <el-header>
      <div>
        <el-row>
        <el-col :span="24">
          <div style="font-size:25px">工作经历管理</div>
        </el-col>
        </el-row>
      </div>
    </el-header>
    <el-main>
    <el-table
    :data="tableData"
    border
    style="font-size: 16px; width:90% left:10% ">

    <el-table-column type="index" width="60" label="序号">  
    </el-table-column> 
    <el-table-column
      prop="static"
      label="状态"
      width="60">
    </el-table-column>
    <el-table-column
      prop="work"
      label="工作类型"
      width="100">
    </el-table-column>
    <el-table-column
      prop="start"
      label="开始日期"
      width="100">
    </el-table-column>
    <el-table-column
      prop="end"
      label="结束日期"
      width="100">
    </el-table-column>
    <el-table-column
      prop="workhome"
      label="工作单位"
      width="100">
    </el-table-column>
    <el-table-column
      prop="position"
      label="工作岗位"
      width="100">
    </el-table-column>
    <el-table-column
      prop="content"
      label="工作内容"
      width="100">
    </el-table-column>
    <el-table-column
      prop="person"
      label="证明人"
      width="90">
    </el-table-column>
    <el-table-column
      prop="tel"
      label="联系电话"
      width="100">
    </el-table-column>
    <el-table-column
      prop="beizhu"
      label="备注">
    </el-table-column>
    <el-table-column >
            <!-- 让弹框显示 -->
            <template slot-scope="scope">
                <el-button type="primary" @click="sets(scope.row)" size="large">修改</el-button>
            </template>     
        </el-table-column>
  </el-table>



        <!-- 添加经历的对话框 -->
    <el-dialog title="新增工作经历" :visible.sync="el_show" height="2px">
    <!-- 内容主体区 -->
    <el-form width="50px">
        <!-- <el-form-item label="技能名称" prop="skillname" >
        <el-input v-model="addForm.skillname"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="工作单位" prop="workhome" >
        <el-input v-model="workhome"></el-input>
        </el-form-item> -->
          <el-row :gutter="20">
        <el-col :span="12"><div> 
            <el-form-item label="工作单位" prop="workhome">
        <el-input v-model="workhome"></el-input>
           </el-form-item>
        </div></el-col>
        <el-col :span="8"><div>
            <el-form-item label="工作类型" prop="work">
        <!-- <el-input v-model="work"></el-input> -->
        <el-select v-model="work" placeholder="工作类型">
      <el-option label="兼职" value="兼职"></el-option>
      <el-option label="全职" value="全职"></el-option>
    </el-select>
        </el-form-item>
        </div></el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="12"><div> 
            <el-form-item label="开始日期" prop="start">
        <el-input v-model="start"></el-input>
           </el-form-item>
        </div></el-col>
        <el-col :span="12"><div>
            <el-form-item label="结束日期" prop="end">
        <el-input v-model="end"></el-input>
        </el-form-item>
        </div></el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="12"><div> 
            <el-form-item label="工作岗位" prop="position">
        <el-input v-model="position"></el-input>
           </el-form-item>
        </div></el-col>
        <el-col :span="12"><div>
            <el-form-item label="工作内容" prop="content">
        <el-input v-model="content"></el-input>
        </el-form-item>
        </div></el-col>
        </el-row>
         <!-- <el-row :gutter="20">
        <el-col :span="12"><div> 
            <el-form-item label="工作类型" prop="work">
        <el-input v-model="work"></el-input>
           </el-form-item>
        </div></el-col> 
        <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="获奖证书" prop="certificate">
        <el-input v-model="certificate"></el-input>
        </el-form-item>
        </div></el-col> -->
        <!-- </el-row> --> 
         <el-row :gutter="20">
        <el-col :span="12"><div> 
            <el-form-item label="证明人" prop="person">
        <el-input v-model="person"></el-input>
           </el-form-item>
        </div></el-col>
        <el-col :span="12"><div>
            <el-form-item label="联系电话" prop="tel">
        <el-input v-model="tel"></el-input>
        </el-form-item>
        </div></el-col>
        </el-row>
       
        <el-form-item label="备注" prop="beizhu">
        <el-input v-model="beizhu " type="textarea" :row="6"></el-input>
        </el-form-item>
    </el-form>
    <!-- 底部区域 -->
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="pushs()">新 增</el-button>
        <el-button  @click="err()">取 消</el-button>
    </span>
    </el-dialog>


    <el-dialog title="修改工作经历" :visible.sync="el_xiu">
        <el-form>
            <el-form-item label="工作单位" :label-width="formLabelWidth">
            <el-input placeholder="请输入技能名称" v-model="newtable.workhome" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工作岗位" :label-width="formLabelWidth">
            <el-input v-model="newtable.position" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="开始日期" :label-width="formLabelWidth">
            <el-input v-model="newtable.start" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="结束日期" :label-width="formLabelWidth">
            <el-input  v-model="newtable.end" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工作内容" :label-width="formLabelWidth">
            <el-input placeholder="请输入工作内容" v-model="newtable.content" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工作类型" :label-width="formLabelWidth">
            <el-input placeholder="请输入工作类型" v-model="newtable.work" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="证明人" :label-width="formLabelWidth">
            <el-input placeholder="请输入证明人姓名" v-model="newtable.person" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
            <el-input placeholder="请输入您的联系电话" v-model="newtable.tel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input placeholder="请备注内容" v-model="newtable.beizhu" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="trueset()">保存</el-button>
            <el-button  @click="xg_err()">取 消</el-button>
        </div>
        </el-dialog>
        </el-main>
        <el-footer>
         <el-button type="primary" @click="adds()" size="large" style="margin-top:10px">新增</el-button>
         <el-button  type="primary" @click="open2" size="large" style="margin-top:10px">提交</el-button> 
        </el-footer>

     
       
   
</el-container>

</el-row> 
</el-card> 
</div>
</template>

<script>
  export default {
    data() {
      return {
         tableData: [{
            id:1,
            static:'入职',
            work:'兼职',
            start:'2019年',
            end:'2020年',
            workhome:'阿里',
            content:'',
            position:'程序员',
            person:'',
            tel:'xxxxxxxx',
            beizhu:'暂无',

          }, {
            id:2,
            static:'入职',
            work:'兼职',
            start:'2018年',
            end:'2019年',
            workhome:'腾讯',
            content:'',
            position:'程序员',
            person:'',
            tel:'xxxxxxxx',
            beizhu:'暂无',

          }, {
            id:3,
            static:'入职',
            work:'兼职',
            start:'2020年',
            end:'2020年',
            workhome:'字节跳动',
            content:'',
            position:'程序员',
            person:'',
            tel:'xxxxxxxx',
            beizhu:'暂无',

          }, {
           id:4,
            static:'入职',
            work:'兼职',
            start:'2018年',
            end:'2020年',
            workhome:'鹅厂',
            content:'',
            position:'程序员',
            person:'',
            tel:'xxxxxxxx',
            beizhu:'暂无',

          },
          // {
          //  id:5,
          //   static:'',
          //   work:'兼职',
          //   start:'',
          //   end:'',
          //   workhome:'',
          //   content:'',
          //   position:'',
          //   person:'',
          //   tel:'',
          //   beizhu:'',

          // },
        ],
        el_show:false,
        
        el_xiu:false,
            work:'',
            start:'',
            end:'',
            workhome:'',
            content:'',
            position:'',
            person:'',
            tel:'',
            beizhu:'',
        newtable:{
            work:'',
            start:'',
            end:'',
            workhome:'',
            content:'',
            position:'',
            person:'',
            tel:'',
            beizhu:'',
        },   //修改内容暂存区
        formLabelWidth: '120px',
        newid:0   //存储点击的id
      }
    },
    methods:{
        //新增让弹框显示
        adds:function(){
            this.el_show=true;
            
        },
        //取消让弹框隐藏
        err:function(){
            this.el_show=false;
        },
        

         //新增
        pushs:function(){
            if(!this.workhome||!this.start||!this.end||!this.position
            ||!this.content||!this.work
            ||!this.person||!this.tel||!this.beizhu){
                this.$message.error('内容不能为空');
                return;
            }
            //使用map方法获取到id的最大值
            let ids = Math.max(...this.tableData.map(function(item){return item.id}))+1;
            this.tableData.push({
                    workhome:this.workhome,
                    start:this.start,
                    end:this.end,
                    position:this.position,
                    content:this.content,
                    work:this.work,
                    person:this.person,
                    tel:this.tel,
                    beizhu:this.beizhu,
                    id:ids
            })
            this.searchtableData=this.tableData;  //绑定搜索框初始数据
            this.$message({
                message: '创建成功',
                type: 'success'
            });
            this.workhome="",
            this.start="",
            this.end="",
            this.position="",
            this.content="",
            this.work="",
            this.person="",
            this.tel="",
            this.beizhu="",
            
            this.el_show=false;
        },


        //修改
        //弹出框 显示
        sets:function(val){
            this.el_xiu=true;
           
            console.log(val)
            this.newtable={
                workhome:val.workhome,
                start:val.start,
                end:val.end,
                position:val.position,
                content:val.content,
                work:val.work,
                person:val.person,
                tel:val.tel,
                beizhu:val.beizhu,
                id:val.id
            }
        },
        xg_err:function(){
            this.el_xiu=false;
        },
        //保存修改
        trueset:function(){
            console.log(this.newtable.date+"===")
            for(var i=0;i<this.tableData.length;i++){
                if(this.tableData[i].id==this.newtable.id){
                    this.tableData[i].workhome=this.newtable.workhome;
                    this.tableData[i].start=this.newtable.start;
                    this.tableData[i].end=this.newtable.end;
                    this.tableData[i].position=this.newtable.position;
                    this.tableData[i].content=this.newtable.content;
                    this.tableData[i].person=this.newtable.person;
                    this.tableData[i].work=this.newtable.work;
                    this.tableData[i].tel=this.newtable.tel;
                    this.tableData[i].beizhu=this.newtable.beizhu;
                    this.tableData[i].id=this.newtable.id;
                    this.el_xiu=false;
                }
            }
            this.searchtableData=this.tableData;  //绑定搜索框初始数据
        },
         open2() {
        this.$message({
          showClose: true,
          message: '恭喜你，已完成提交！',
          type: 'success'
        });
      }
        

    }
  }
</script>
<style lang="less" scoped>
        div {
        font-size: 15px;
        font-family:
       "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }
     .el-header {
    background-color:#E9EEF3 ;
    color: #333;
    text-align: center;
    line-height: 50px;
    }
    .el-footer {
    background-color:#E9EEF3 ;
    color: #333;
    text-align: center;
    line-height: 50px;
    }
  .el-header {
    padding: 0 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    padding-top: 8px;
    }
    .label{
      font-size: 15px;
    } 
    .el-dialog__header {
    padding: 20px 20px 10px;
    line-height: 20px;
    height: 80px;
    }
    .el-dialog__headerbtn {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 16px;
    margin-top: -27px;
    }
</style>